<template>
  <div class="main-container">
    <!-- ================================================== -->
    <!-- ================================================== -->
    <!-- ========== 新建编辑发票抬头 ======================= -->
    <!-- ================================================== -->
    <!-- ================================================== -->
    <el-button type="primary" @click="openDialog">新建发票抬头</el-button>
    <el-dialog width="550px" :visible.sync="show_dialog" append-to-body :close-on-click-modal="false" title="编辑发票抬头">
      <el-form label-width="150px">
        <el-form-item label="客户简称">
          <el-input class="w150" v-model="header.customer"></el-input>
        </el-form-item>
        <el-form-item label="纳税人名称">
          <el-input class="w300" v-model="header.taxpayerName"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号">
          <el-input class="w300" v-model="header.taxpayerNumber"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input class="w300" v-model="header.address"> </el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input class="w300" v-model="header.tel"> </el-input>
        </el-form-item>
        <el-form-item label="开户行">
          <el-input class="w300" v-model="header.bank"> </el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input class="w300" v-model="header.account"> </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="saveReq">保存</el-button>
          <el-button type="info" @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- ================================================== -->
    <!-- ================================================== -->
    <!-- ========== 发票抬头表格 =========================== -->
    <!-- ================================================== -->
    <!-- ================================================== -->
    <el-table border :data="headerList" row-key="headerId" :row-class-name="tableRowClassName">
      <el-table-column label="" type="index" align="center" width="50"></el-table-column>
      <el-table-column prop="customer" label="客户简称" align="center" width="130"> </el-table-column>
      <el-table-column prop="taxpayerName" label="客户名称" align="center" width="240"> </el-table-column>
      <el-table-column prop="taxpayerNumber" label="纳税人识别号" align="center" width="185"> </el-table-column>
      <el-table-column prop="address" label="地址" align="center" min-width="280"> </el-table-column>
      <el-table-column prop="tel" label="电话" align="center" width="160"> </el-table-column>
      <el-table-column prop="bank" label="开户行" align="center" min-width="175"> </el-table-column>
      <el-table-column prop="account" label="账号" align="center" width="200"> </el-table-column>
      <el-table-column prop="state.string" label="状态" align="center" width="120"> </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="90">
        <template slot-scope="scope">
          <div v-if="scope.row.state.code == 2">
            <el-button @click="showApproval(scope.row)" type="text" size="small" v-if="$checkAuth('客户信息审批')">审批</el-button>
          </div>
          <div v-else>
            <el-button @click="modify(scope.row)" type="text" size="small" v-if="$checkAuth('客户信息管理')">修改</el-button>
            <el-button @click="remove(scope.row)" type="text" size="small" v-if="$checkAuth('客户信息管理')">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- ================================================== -->
    <!-- ================================================== -->
    <!-- ========== 审批发票抬头 ======================= -->
    <!-- ================================================== -->
    <!-- ================================================== -->
    <el-dialog width="550px" :visible.sync="show_dialog_approval" append-to-body :close-on-click-modal="false" title="审批发票抬头">
      <el-form label-width="150px">
        <el-form-item label="客户简称">
          <el-input class="w150" v-model="header.customer" readonly></el-input>
        </el-form-item>
        <el-form-item label="纳税人名称">
          <el-input class="w300" v-model="header.taxpayerName" readonly></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号">
          <el-input class="w300" v-model="header.taxpayerNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input class="w300" v-model="header.address" readonly> </el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input class="w300" v-model="header.tel" readonly> </el-input>
        </el-form-item>
        <el-form-item label="开户行">
          <el-input class="w300" v-model="header.bank" readonly> </el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input class="w300" v-model="header.account" readonly> </el-input>
        </el-form-item>
        <el-form-item label="审批结果">
          <el-radio v-model="approvalParam.result" label="1" border>通过</el-radio>
          <el-radio v-model="approvalParam.result" label="0" border>不通过</el-radio>
        </el-form-item>
        <el-form-item label="审批意见">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="approvalParam.remark"> </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="approval">保存</el-button>
          <el-button type="info" @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import _ from 'lodash'

import { getFapiaoHeaderApi, saveFapiaoHeaderApi, removeFapiaoHeaderApi, approvalFapiaoHeaderApi } from '@/api/api_fapiao_header'

@Component({
  components: {}
})
export default class Material extends Vue {
  created() {
    this.getFapiaoHeaderListReq()
  }

  headerList: any = []
  header: any = {}
  show_dialog: boolean = false
  show_dialog_approval: boolean = false
  approvalParam: any = {}

  initHeader() {
    this.header = {
      headerId: -1,
      taxpayerName: '',
      taxpayerNumber: '',
      address: '',
      tel: '',
      bank: '',
      account: ''
    }
    this.approvalParam = {}
  }

  async getFapiaoHeaderListReq() {
    await getFapiaoHeaderApi({ all: true }).then(res => (this.headerList = res.data))
  }

  openDialog() {
    this.initHeader()
    this.show_dialog = true
  }

  closeDialog() {
    this.initHeader()
    this.show_dialog = false
    this.show_dialog_approval = false
  }

  saveReq() {
    this.$confirm('保存后将提交待审核，请确认', '提示').then(() => {
      this.saveHeaderReq()
    })
  }

  async saveHeaderReq() {
    await saveFapiaoHeaderApi(this.header).then(res => {
      this.closeDialog()
      this.getFapiaoHeaderListReq()
    })
  }

  showApproval(header) {
    this.initHeader()
    this.header = header
    this.approvalParam.headerId = header.headerId
    this.show_dialog_approval = true
  }

  async approval() {
    await approvalFapiaoHeaderApi(this.approvalParam).then(res => {
      this.getFapiaoHeaderListReq()
      this.closeDialog()
    })
  }

  modify(header: object) {
    this.header = header
    this.show_dialog = true
  }

  remove(header: object) {
    let message = '确定删除【' + header['taxpayerName'] + '】的客户信息'
    this.$confirm(message, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(() => this.removeReq(header['headerId']))
  }

  async removeReq(headerId: number) {
    await removeFapiaoHeaderApi({ headerId: headerId }).then(res => {
      this.getFapiaoHeaderListReq()
    })
  }

  tableRowClassName({ row }) {
    if (row.state.string == '待审批') {
      return 'warning-row'
    } else if (row.state.string == '审批未通过') {
      return 'success-row'
    }
    return ''
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
